<template>
    <div class="col-xs-6 col-md-6 col-lg-6 diskinfo">
        <div class="bgcolor">
            <loading v-show='!show'></loading>
            <div class="page-title">
                <h3>{{title}}</h3>
            </div>
            <transition name='fade'>
                <div class="content" v-show='show'>
                    <div>
                        <span class="quare bulesquare"></span><span>{{$t('realTime.available')}} : {{diskPie.available + diskPie.unit}}</span>
                        <span class="quare redsquare"></span><span>{{$t('realTime.used')}} : {{diskPie.used + diskPie.unit}}</span>
                    </div>
                    <div id="diskpic" class="pic">
                    </div>
                    <p>{{$t('realTime.allCapacity')}} : {{diskPie.total + diskPie.unit}}</p>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
import loading from 'components/common/loading'
export default {
    props: {
        title:{
            type: String,
        },
        disk: {
            type: Object,
            default: {
                total: 0,
                used: 0
            },
            required: true
        },
        show:{
            type:Boolean,
            required:true
        }
    },
    mounted: function () {
        if (this.themeColor ==='blue') {
            this.color = ['#f39800','#57a3f3']
        } else if (this.themeColor ==='red') {
            this.color= ['#f39800','#d8252f']
        }
        this.loadPie()
    },
    computed: {
        diskPie: function() {
            return this.convertByte(this.disk)
        }
    },
    watch: {
        disk: function() {
            let chart = $("#diskpic").highcharts()
            let label1 = this.$t('realTime.used')
            let label2 = this.$t('realTime.available')
            chart.series[0].setData([[label1,Number(this.diskPie.used)],[label2,Number(this.diskPie.available)]])
        }
    },
    methods: {
        convertByte(disk) {
            let result = {total:0,available:0,used:0,unit:'M'}
            if (disk.total > 1024 * 1024 * 1024) {
                result.available = ((disk.total - disk.used) / 1024 / 1024 / 1024).toFixed(2)-0
                result.used = (disk.used / 1024 / 1024 / 1024).toFixed(2)-0
                result.total = (result.available+result.used).toFixed(2)          
                result.unit = 'G'
            } else {
                result.available = ((disk.total - disk.used) / 1024 / 1024).toFixed(1)-0
                result.used = (disk.used / 1024 / 1024).toFixed(1)-0
                result.total = (result.available+result.used).toFixed(1)
            }
            return result
        },
        loadPie() {
            let _this =this
            Highcharts.setOptions({
                colors: _this.color,
                credits: {
                    enabled: false // 禁用版权信息
                },
                exporting: {
                    enabled: false
                }
            })
            Highcharts.chart('diskpic',{
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45
                    },
                    backgroundColor: '#eeeeee'
                },
                tooltip: {
                	headerFormat: '<small>{point.key}</small>',
                    pointFormat: ':<b>{point.percentage:.1f}%</b>'
                },
                title: {
                    text: null
                },
                plotOptions: {
                    pie: {
                        cursor: 'pointer',
                        innerSize: 140,
                        depth: 30,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                xAxis: {
                    gridLineColor: '#d3e8f0',
                    gridLineWidth: 2
                },
                yAxis: {
                    gridLineColor: '#d3e8f0',
                    gridLineWidth: 2,
                    tickInterval: 20,
                },
                series: [{
                    name: 'Delivered amount',
                    data: [
                        [_this.$t('realTime.used'), 5],
                        [_this.$t('realTime.available'), 5]
                    ]
                }]
            })
        }
    },
    components:{
        loading
    }
}
</script>
<style scoped>
    .pic{
        width: 520px;
        height: 260px;
        margin: 5px 0;
    }
</style>